<template>
  <view class="page-image">
    <up-navbar
      placeholder
      bgColor="transparent">
      <template #left>
        <view />
      </template>
      <template #center>
        <view class="text-700-532">消息中心</view>
      </template>
    </up-navbar>

    <view class="p-h24">
      <up-tabs :list="tabs" :activeStyle="activeStyle" lineColor="#3F77FB" />

      <view
        v-for="index in 5"
        :key="index"
        class="card flex"
        @click="showPopup = true">
        <image class="cover" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="aspectFill" />

        <view class="flex-1 flex-d-lc m-l20">
          <view class="flex-sb w">
            <text class="text-700-130">连锁餐厅</text>
            <text class="text-500-326">我的投递</text>
          </view>

          <view class="flex-sb w m-t16">
            <text class="text-500-326">服务员 | 购买社保 | 全职</text>
            <text class="text-500-326">01-07</text>
          </view>
        </view>
      </view>
    </view>
    <up-popup
      :show="showPopup"
      mode="bottom"
      round="20rpx"
      closeable
      @close="showPopup = false">
      <BottomConfirm @close="showPopup = false" />
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import BottomConfirm from './components/bottom-confirm'

  const showPopup = ref(false)

  const activeStyle = {
    'color': '#3F77FB',
    'font-size': '28rpx',
    'font-weight': 'bold',
  }

  const tabs = reactive([
    { name: '面试邀请' },
  ])
</script>

<style lang="scss" scoped>
	.card {
		height: 174rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEEEEE;

		.cover {
			width: 108rpx;
			height: 108rpx;
			border-radius: 10rpx;
		}
	}
</style>
